<template>
	<view class="content">
		<view class="centers">
			<view class="tit">
				<view class="titles">
					<view class="title" v-for="(val,index) in item" @click="changes(index)" :class="{active:index == num}">
						<view>{{item[index]}}</view>
					</view>
				</view>
			</view>
			<view class="cuntent" v-for="(val,index) in cont" v-show="index==num">
				<view class="cuntents" v-for="items in val.conts">
					<view class="cuntentsTop">
						<view>{{items.p1}}</view>
						<view class="views">
							<view class="viewsOne">{{items.p2}}</view>
							<view class="viewsTwo">{{items.p3}}</view>
						</view>
						<view class="cuntentsTops">
							<view>{{items.p4}}</view>
							<view>{{items.p5}}</view>
						</view>
					</view>
					<view class="cuntentsBottom">
						<image :src="items.img1" ></image>
						<view>{{items.p6}}</view>
						<view>{{items.p7}}</view>
					</view>
					<view class="invoice">
						<navigator url="/pages/order/invoice">
							<image :src="items.img2" mode=""></image>
							<view>{{items.p8}}</view>
						</navigator>
					</view>
				</view>
				<view class="cuntentss" v-for="items in val.contss">
					<view class="cuntentsBottoms">
						<image :src="items.img1" ></image>
						<view>{{items.p6}}</view>
						<view>{{items.p7}}</view>
					</view>
				</view>
				<view class="cuntentss" v-for="items in val.contsss">
					<view class="cuntentsBottoms">
						<image :src="items.img1" ></image>
						<view>{{items.p6}}</view>
						<view>{{items.p7}}</view>
					</view>
				</view>
				<view class="cuntentss" v-for="items in val.cont4s">
					<view class="cuntentsBottoms">
						<image :src="items.img1" ></image>
						<view>{{items.p6}}</view>
						<view>{{items.p7}}</view>
					</view>
				</view>
				<view class="cuntentss" v-for="items in val.cont5s">
					<view class="cuntentsBottoms">
						<image :src="items.img1" ></image>
						<view>{{items.p6}}</view>
						<view>{{items.p7}}</view>
					</view>
				</view>
			</view>
		</view><!--centers-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: ["加油", "劵包","会员","商城","养车"],
				cont: [{
					conts:[{
						p1:"已为您累计节省",
						p2:"￥",
						p3:"0.00",
						p4:"累计消费￥0.00",
						p5:"加油总量0.00",
						img1:'../../static/w1.jpg',
						p6:"暂无订单",
						p7:"赶快去加油吧",
						img2:'../../static/w2.jpg',
						p8:"开发票",
					}
					]
					
				},{
					contss:[{
						img1:'../../static/w1.jpg',
						p6:"暂无订单",
						p7:"赶快去加油吧",
					}]
				},
				{
					contsss:[{
						img1:'../../static/w1.jpg',
						p6:"暂无订单",
						p7:"赶快去加油吧",
					}]
				},
				{
					cont4s:[{
						img1:'../../static/w1.jpg',
						p6:"暂无订单",
						p7:"赶快去加油吧",
					}]
				},
				{
					cont5s:[{
						img1:'../../static/w1.jpg',
						p6:"暂无订单",
						p7:"赶快去加油吧",
					}]
				}
				], 
				num: 0,
			}
		},
		onLoad() {
	
		},
		methods: {
			changes(key) {
				this.num = key;
			}
		}
	}
</script>

<style>
	.titles{display: flex;justify-content: space-between;width: 80%;background-color: #fff;font-size: 15px;padding: 0 10px;box-sizing: border-box;}
	.title{padding: 10px 0;line-height: 20px;box-sizing: border-box;}
	.cuntent{background-color: #F2F4F8;height: 100vh;}
	.cuntents{padding: 20px;box-sizing: border-box;overflow: auto;}
	.active{font-size: 20px;font-weight: bold;border-bottom: 4px solid red;}
	.cuntentsTop{background-image: linear-gradient(to right , #FF432C, #FF7A1F);margin: 0 auto;color: #fff;border-radius: 10px;padding: 25px;box-sizing: border-box;}
	.views{font-weight: bold;display: flex;margin: 15px 0;}
	.viewsOne{margin-top: 10px;}
	.viewsTwo{font-size: 40px;}
	.cuntentsTops{display: flex;font-size: 16px;justify-content: space-between;width: 80%;}
	.cuntentsBottom{text-align: center;color: #A6A6A6;font-size: 20px;line-height: 32px;margin: 60px 0;}
	.cuntentsBottom>image{width: 150px;height: 150px;}
	.cuntentsBottoms{text-align: center;color: #A6A6A6;font-size: 20px;line-height: 32px;padding-top: 20vh;}
	.cuntentsBottoms>image{width: 150px;height: 150px;}
	.invoice{width: 80px;height: 70px;float: right;background-color: #fff;text-align: center;padding-top: 10px;border-radius: 50%;}
	.invoice image{width: 30px;height: 35px;}
</style>